<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label">外网IP地址</label>
            <div class="layui-input-block" style="width: 600px;">
                <div class="layui-inline">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 300px;">
                            <input type="text" id="ExternalIP" placeholder="正在获取，请稍后..." readonly class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="newIp" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            刷新IP地址
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内网IP地址</label>
            <div class="layui-input-block" style="width: 600px;">
                <div class="layui-inline">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 300px;">
                            <input type="text" id="InternalIP" placeholder="正在获取，请稍后..." readonly class="layui-input">
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">端口号</label>
            <div class="layui-input-block" style="width: 600px;">
                <div class="layui-inline">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 300px;">
                            <input type="text" id="Port" placeholder="正在获取，请稍后..." readonly class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">绑定域名</label>
            <div class="layui-input-block" style="width: 600px;">
                <div class="layui-inline">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 300px;">
                            <input type="text" id="Domain" placeholder="正在获取，请稍后..." readonly class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="editDomain" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            编辑
                        </button>
                        <button id="saveDomain" type="button" class="layui-btn layui-btn-warm layui-btn-sm"
                            style="display:none;">
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Token</label>
            <div class="layui-input-block" style="width: 600px;">
                <div class="layui-inline">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 300px;">
                            <input type="text" id="Token" placeholder="正在获取，请稍后..." readonly class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="newToken" type="button" class="layui-btn layui-btn-warm layui-btn-sm">
                            生成新Token
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">webHook地址样例</label>
            <div class="layui-input-block">
                <input type="text" style="border: 0px;" id="whAddr" placeholder="正在获取，请稍后..." readonly value=""
                    class="layui-input">
            </div>
        </div>

    </div>
</div>
<script>
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();
        $.ajax({
            url: "/hookinfo",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                $('#ExternalIP').val(data.data.ExternalIP);
                $('#InternalIP').val(data.data.InternalIP);
                $('#Port').val(data.data.Port);
                if (data.data.Domain) {
                    $('#Domain').val(data.data.Domain);
                } else {
                    $('#Domain').val(" ");
                }

                $('#Token').val(data.data.Token);
                $('#whAddr').val(data.data.whAddr);
            },
            error: function (data) {
                layer.alert(data.msg, { icon: 2 });
            }
        });

        $("#editDomain").click(function () {
            $("#editDomain").hide();
            $("#saveDomain").show();
            $('#Domain').removeAttr("readonly");
            $('#Domain').focus();
        });
        $("#saveDomain").click(function () {
            $("#editDomain").show();
            $("#saveDomain").hide();
            $('#Domain').attr("readonly", "readonly");
            var formData = new FormData();
            formData.append("domain", $('#Domain').val());
            $.ajax({
                url: "/savedomain",
                type: "post",
                cache: false,
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(data);
                    $('#whAddr').val(data.data.whAddr);
                    layer.alert("保存成功！", { icon: 1 });
                },
                error: function (data) {
                    layer.alert(data, { icon: 2 });
                }
            });
        });
        $("#newIp").click(function () {
            var formData = new FormData();
            $.ajax({
                url: "/newip",
                type: "post",
                cache: false,
                success: function (data) {
                    $('#ExternalIP').val(data.data.ExternalIP);
                    $('#InternalIP').val(data.data.InternalIP);
                    $('#whAddr').val(data.data.whAddr);
                    layer.alert("更新成功！", { icon: 1 });
                },
                error: function (data) {
                    layer.alert(data, { icon: 2 });
                }
            });
        });
        $("#newToken").click(function () {
            var formData = new FormData();
            $.ajax({
                url: "/newtoken",
                type: "post",
                cache: false,
                success: function (data) {
                    $('#Token').val(data.data.Token);
                    $('#whAddr').val(data.data.whAddr);
                    layer.alert("更新成功！", { icon: 1 });
                },
                error: function (data) {
                    layer.alert(data, { icon: 2 });
                }
            });
        });
    });
</script>